<template>
  <div class="login">
    <div class="out">
      <span class="iconfont iconicon-test"></span>
    </div>
    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>

    <UserPut
      type="text"
      UserText="用户名/手机号码"
      :rule="Usernamerule"
      errMsg="用户名或手机号码错误"
      @valChanged="setUsername"
    />

    <UserPut
      type="password"
      UserText="密码"
      :rule="UserPassrule"
      errMsg="密码错误"
      @valChanged="setPassword"
    />

    <UserBtn LoginText="登陆" @clicked="login" />
    <!-- 只要子组件btn事件触发这里就发生请求或者接收数据 -->
  </div>
</template>

<script>
import UserPut from "../components/UserPut";
import UserBtn from "../components/UserBtn";
export default {
  components: {
    UserPut,
    UserBtn
  },
  data() {
    return {
      username: "",
      password: "",
      Usernamerule: "^\\d{5,11}$",
      UserPassrule: "^.{3,9}$"
    };
  },
  methods: {
    login() {
      // console.log("父组件接收到按钮子组件的点击事件, 触发自己的登录函数");
      // 登录请求就需要 用户名和密码的数据
      // 这里直接通过 this.username / this.password 拿到用户输入数据
      // console.log("用户名", this.username);
      // console.log("密码", this.password);
      //错误提示
      if (this.username == "" || this.password == "") {
        // this.$toast.fail("请填写完整信息");

        this.$dialog.alert({
          message: "请填写完整信息"
        });

        return;
      }
      const regExpname = new RegExp(this.Usernamerule);
      if (!regExpname.test(this.username)) {
        // this.$toast.fail("用户名格式不对");
        this.$dialog.alert({
          message: "用户名格式不对"
        });
        return;
      }
      const regExpPass = new RegExp(this.UserPassrule);
      if (!regExpPass.test(this.password)) {
        // this.$toast.fail("密码格式不对");
        this.$dialog.alert({
          message: "密码格式不对"
        });
        return;
      }

      this.$axios({
        url: "http://127.0.0.1:3000/login",
        method: "POST", //注意,这里的method后面是没有s的,vue呢是多个事件才加s
        data: {
          username: this.username,
          password: this.password
        }
      }).then(res => {
        console.log(res);

        if (res.data.message == "登录成功") {
          this.$toast.success(res.data.message + "正在跳转...");
          const { token, user } = res.data.data;
          // this.$dialog.alert({
          //   message: res.data.message + "正在跳转..."
          // });
          //登陆成功后将token和id传入本地储存,id重要,是针对哪个用户的,一定要传
          localStorage.setItem("token", token);
          localStorage.setItem("id", user.id);

          setTimeout(
            function() {
              this.$router.replace({ path: "/index" });
            }.bind(this),
            2000
          );
        } else {
          // this.$toast.fail(res.data.message);
          this.$dialog.alert({
            message: res.data.message
          });
        }
      });
    },
    //将获得的用户名和密码都赋值给data
    setUsername(username) {
      this.username = username;
    },
    setPassword(password) {
      this.password = password;
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  height: 100%;
  background-image: url("../assets/login.png");
  .out {
    padding: 6.667vw;
    .iconicon-test {
      font-size: 6.667vw;
    }
  }
  .logo {
    text-align: center;
    .iconnew {
      font-size: 35vw;
      color: #f3f9ff;
    }
  }
}
</style>